<!DOCTYPE html>
<html>
<head>
  <style>
     #container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}
 
#photo {
	width: 2000px;
	animation: switch 16s ease-out infinite;
	animation-delay: 1s;
}
 
#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}
 
@keyframes switch {
	0%{
		margin-left: 0;
	}
	 25% {
		margin-left: -400px;
	}
	50% {
		margin-left: -800px;
	}
	75% {
		margin-left: -1200px;
	}
	
	100% {
		margin-left: -1600px;
	}
}

  </style>
</head>
<body>
      <div id="container">
        <div id="photo">
            <img src="img/1.jpg" />
            <img src="img/2.jpg" />
            <img src="img/3.jpg" />
            <img src="img/4.jpg" />
            <img src="img/5.jpg" /> 
        </div>
    </div>
</body>
</html>
